<<<<<<< HEAD
<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: 宋佳馨 song2005315@qq.com
 * @LastEditTime: 2025-09-26 16:54:15
-->
<template>
  <div class="dashboard">
    <!-- 组件内容 -->
=======
<template>
  <div class="dashboard">
    <Top></Top>
    <div class="bottom-container">
      <div class="left">
        <Map></Map>
      </div>
      <!-- 父容器：parent -->
      <div class="parent">
        <!-- 图表父容器：chart -->
        <div class="chart">
          <!-- 顶部区域：top -->
          <div class="top">
            <!-- 左侧饼状图容器 -->
            <div class="left">
              <C221></C221>
            </div>
            <!-- 右侧折线图容器 -->
            <div class="right">
              <C222></C222>
            </div>
          </div>
          <!-- 底部柱状图容器 -->
          <div class="bottom">
            <C223></C223>
          </div>
        </div>
      </div>
    </div>
>>>>>>> 1576b6416372d97f4d59de56fc7f862b4da9250b
  </div>
</template>
<script>
import Top from "./components/Top.vue";
import Map from "./components/Map.vue";
import C221 from "./components/C221.vue";
import C222 from "./components/C222.vue";
import C223 from "./components/C223.vue";

export default {
<<<<<<< HEAD
  name: 'DashboardIndex',
  // 其他逻辑
}
</script>
=======
  components: {
    Top,
    Map,
    C221,
    C222,
    C223,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.dashboard {
  width: 100%;
}

.bottom-container {
  display: flex;
}

.left {
  flex: 1;
  margin-right: 10px;

}

/* 父容器 parent */
.parent {
  margin-top: 40px;
  width: 740px;
  flex: 1;

}

/* parent > chart：chart 是 parent 的直接子元素 */
.parent>.chart {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* chart > top：top 是 chart 的直接子元素 */
.chart>.top {
  display: flex;
  margin-bottom: 10px;
}

/* top > left：left 是 top 的直接子元素 */
.top>.left {
  flex: 1;
  margin-right: 10px;
}

/* top > right：right 是 top 的直接子元素 */
.top>.right {
  flex: 1;
}

/* chart > bottom：bottom 是 chart 的直接子元素 */
.chart>.bottom {
  flex: 1;
  
}
</style>
>>>>>>> 1576b6416372d97f4d59de56fc7f862b4da9250b
